<template>
    <div class="box">
        <header class="head">
            <span class="iconfont icon-iconfontcaidan" @click="dianw" ></span>
            <p class="jl">吉林餐饮网</p>
            <span class="iconfont icon-wode" @click="dian"></span>
        </header>
        <div class="swiper">
            <swiper :options="swiperOption" ref="mySwiper">

                <swiper-slide>
                    <img src="../assets/font/2.jpg" alt="" class="img">
                </swiper-slide>

                <swiper-slide>
                    <img src="../assets/font/1.jpg" alt="" class="img">
                </swiper-slide>

                <swiper-slide>
                    <img src="../assets/font/3.jpg" alt="" class="img">
                </swiper-slide>

                <!-- Optional controls -->

                <div class="swiper-pagination"   slot="pagination"></div>
            </swiper>
        </div>
        <div class="ms">
            <div class="ts">
                <p class="p">特色美食</p>
                <img src="../assets/font/4.jpg" alt="" class="img1">
            </div>
            <div class="ts">
                <p class="ys">养生资讯</p>
                <img src="../assets/font/5.jpg" alt="" class="img1">
            </div>
            <div class="ts">
                <p class="p">餐饮资讯</p>
                <img src="../assets/font/6.jpg" alt="" class="img1">
            </div>
            <div class="ts">
                <p class="dz">打折优惠</p>
                <img src="../assets/font/7.jpg" alt="" class="img1">
            </div>
            <div class="ts">
                <p class="p">健康食谱</p>
                <img src="../assets/font/8.jpg" alt="" class="img1">
            </div>
            <div class="ts">
                <p class="p">餐饮推荐</p>
                <img src="../assets/font/9.jpg" alt="" class="img1">
            </div>
            <div class="ts">
                <p class="bd">本地餐饮</p>
                <img src="../assets/font/3.jpg" alt="" class="img1">
            </div>
        </div>
        <footer class="db">
            <div class="foot">
                <span class="iconfont icon-zhuye"></span>
                <p class="x"></p>
                <span class="iconfont icon-wode"></span>
            </div>
        </footer>
        <div class="dls" :class="{ws:sure}">
            <ul class="list">
                <router-link to="/denglu" tag="li" class="zc">
                    <span> <img src="../assets/font/10.png" alt="" class="ren"></span>
                    <span class="d">登录</span>
                    <span class="d">注册</span>
                </router-link>
                <router-link to="/shoucang" tag="li"> 
                    <span class="iconfont icon-shoucangjia"></span>
                    <span>收藏夹</span>
                </router-link>
                <router-link to="/xiugai" tag="li">
                    <span class="iconfont icon-yuechi"></span>
                    <span>修改密码</span>
                </router-link>
                <router-link to="/dizhi" tag="li">
                    <span class="iconfont icon-dizhiguanli"></span>
                    <span>地址管理</span>
                </router-link>
                <router-link to="/dingdan" tag="li">
                    <span class="iconfont icon-fenxiang"></span>
                    <span>我的订单</span>
                </router-link>
                <router-link to="/gwc" tag="li">
                    <span class="iconfont icon-gouwuche"></span>
                    <span>&nbsp 购物车</span>
                </router-link>
                <li>
                    <span class="iconfont icon-yunongtongqingchuhuancun"></span>
                    <span>清除缓存</span>
                </li>
            </ul>
        </div> 
        <div class="das" :class="{wq:surr}">
            <ul class="lit">
                <li class="soy">首页</li>
                <li class="mes">特色美食</li>
                <li class="zix">养生资讯</li>
                <li class="czn">餐饮资讯</li>
                <li class="dazhe">打折优惠</li>
                <li class="jk">健康食谱</li>
                <li class="tuj">餐饮推荐</li>
                <li class="bed">本地餐饮</li>
            </ul>
        </div>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            sure:false,
            surr:false,
            swiperOption: {
                loop: true,
                autoplay: {
                    delay: 1000,
                },
                pagination: {
                    el: '.swiper-pagination',
                },
            }
        }
    },
    methods:{
        dian(){
            this.sure = this.sure?false:true;
        },
        dianw(){
            this.surr= this.surr?false:true;
        }
    }
}
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
.box{
    width: 100%;
    overflow: hidden;
}
.lit li{
    // line-height: 65px;
    // padding-left: 20px;
    font-family: '楷体';
    font-size: 20px;
    text-align: center;
}
.lit{
    .soy{
        color:cadetblue;
    }
    .mes{
        color: saddlebrown;
    }
    .zix{
        color: blue;
    }
    .czn{
        color: green;
    }
    .dazhe{
        color: aqua;
    }
    .jk{
        color: blueviolet
    }
    .tuj{
        color: maroon;
    }
    .bed{
        color: red;
    }
}

.wq{
    width: 50% !important;
}
.das{
    width:0 ;
    overflow: hidden;
    height:100%;
    background:rgb(39, 40, 34);
    position:absolute;
    .px2rem(top, 58);
    left:0;
    z-index:999;
    transition:width .5s ease;
    ul{
        li{
            .px2rem(line-height, 120);
            width: 100%;
        }
    }
}
.dls{
    overflow: hidden;
    box-sizing: border-box;
    width:0;
    height:100%;
    background:rgb(39, 40, 34);
    position:absolute;
    .px2rem(top, 58);
    right:0;
    z-index:999;
    transition:width .5s ease;
    .list li{
        line-height: 70px;
        // padding-left: 10px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        box-sizing: border-box;
        font-family: '楷体';
        .icon-shoucangjia{
            color: sandybrown;
        }
        .icon-yuechi{
            color: rebeccapurple;
        }
        .icon-dizhiguanli{
            color: skyblue;
        }
        .icon-fenxiang{
            color: greenyellow;
        }
        .icon-gouwuche{
            color: turquoise;
        }
        .icon-yunongtongqingchuhuancun{
            color: green;
        }
    }
    .d{
        margin-top: 1px;
    }
    .zc{
        margin-top: 10px;       
        .ren{
            vertical-align: middle;
            width: 15%;
        }
    }
}
.ws{
    width:50%;
}
.head {
    .px2rem(line-height, 60);
    background: red;
    display: flex;
    justify-content: space-between;
    .iconfont {
        color: #fff;
        font-size: 26px;
    }
    .jl {
        color: #fff;
        font-family: '楷体';
        .px2rem(font-size,26);
    }
}
.swiper {
    .img {
        width: 100%;
        .px2rem(height, 400);
    }
}
.ms{
    margin-top: 10px;
}
.ts{
    display: flex;
    justify-content: space-around;
    .px2rem(height,300);
    border-bottom: 10px solid #fff;
    .p{
        margin-top: 40px;
        font-size: 24px;
        color: firebrick;
        margin-left: 10px;
        position: absolute;
        left: 0;
        z-index: 100;
        margin-top:10px;
    }
    .ys{
         margin-top: 40px;
        font-size: 24px;
        color: #fff;
        margin-left: 10px;
        position: absolute;
        left: 0;
        z-index: 100;
        margin-top:10px;
    }
    .dz{
         margin-top: 40px;
        font-size: 24px;
        color: #fff;
        margin-left: 10px;
        position: absolute;
        left: 0;
        z-index: 100;
        margin-top:10px;
    }
    .bd{
        margin-top: 40px;
        font-size: 24px;
        color:navy;
        margin-left: 10px;
        position: absolute;
        left: 0;
        z-index: 100;
        margin-top:10px;
    }
    .img1{
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}
.db{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.foot{
    z-index: 999;
    .px2rem(line-height, 70);
    background: red;
    display: flex;
    justify-content: space-around;
    .icon-zhuye{
        .px2rem(font-size,45);
        color: #fff;
    }
    .icon-wode{
        .px2rem(font-size,45);
        color: #fff;
    }
    .x{
        .px2rem(width, 2);
        .px2rem(height, 60);
        background: #fff;
        margin-top: 4px;
    }
}

</style>
